<template>
  <div>
    <el-divider>顶部按钮配置</el-divider>
    <div>
      <div class="flex-row" style="justify-content: space-between">
        <div>
          <el-checkbox v-model="addObj.add">{{addObj.title}}</el-checkbox>
        </div>
        <div>
          <el-button type="text" @click="openDialog(addObj,'add',false)">编辑</el-button>
        </div>
      </div>
      <div class="flex-row" style="justify-content: space-between">
        <div>
          <el-checkbox v-model="deleteBatchesObj.deleteBatches">{{deleteBatchesObj.title}}</el-checkbox>
        </div>
        <div>
          <el-button type="text" @click="openDialog(deleteBatchesObj,'deleteBatches',false)">编辑</el-button>
        </div>
      </div>
      <div class="flex-row" style="justify-content: space-between">
        <div>
          <el-checkbox v-model="importDataObj.importData">{{importDataObj.title}}</el-checkbox>
        </div>
        <div>
          <el-button type="text" @click="openDialog(importDataObj,'importData',false)">编辑</el-button>
        </div>
      </div>
      <div class="flex-row" style="justify-content: space-between">
        <div>
          <el-checkbox v-model="exportDataObj.exportData">{{exportDataObj.title}}</el-checkbox>
        </div>
        <div>
          <el-button type="text" @click="openDialog(exportDataObj,'exportData',false)">编辑</el-button>
        </div>
      </div>
      <div class="flex-row" style="justify-content: space-between">
        <div>
          <el-checkbox v-model="editBatchesObj.editBatches">{{editBatchesObj.title}}</el-checkbox>
        </div>
        <div>
          <el-button type="text" @click="openDialog(editBatchesObj,'editBatches',false)">编辑</el-button>
        </div>
      </div>

<!--      <div class="flex-row" style="justify-content: center">-->
<!--        <el-button type="text" @click="openDialog({},'',true)"><i class="el-icon-plus"></i>新增顶部按钮</el-button>-->
<!--      </div>-->
    </div>

    <el-divider>行内按钮配置</el-divider>
    <div>
      <div class="flex-row" style="justify-content: space-between">
        <div>
          <el-checkbox v-model="editObj.edit">{{editObj.title}}</el-checkbox>
        </div>
        <div>
          <el-button type="text" @click="openDialog(editObj,'edit',false)">编辑</el-button>
        </div>
      </div>
      <div class="flex-row" style="justify-content: space-between">
        <div>
          <el-checkbox v-model="deleteRowObj.deleteRow">{{deleteRowObj.title}}</el-checkbox>
        </div>
        <div>
          <el-button type="text" @click="openDialog(deleteRowObj,'deleteRow',false)">编辑</el-button>
        </div>
      </div>
      <div v-for="item in rowBtnList" :key="item.authorityName" class="flex-row" style="justify-content: space-between">
        <div>
          <el-checkbox v-model="item.checkBol">{{item.title}}</el-checkbox>
        </div>
        <div>
          <el-button type="text" @click="openDialog(item,'',true)">编辑</el-button>
        </div>
      </div>
      <div class="flex-row" style="justify-content: center">
        <el-button type="text" @click="openDialog('','',true)"><i class="el-icon-plus"></i>新增行内按钮</el-button>
      </div>
    </div>

    <el-divider>分页设置</el-divider>
    <el-switch
      v-model="paginSetting"
      active-text="开启分页"
      inactive-text="关闭分页">
    </el-switch>

    <el-dialog-comp title="编辑" :appendToBody="true" :hasFooter="true" ref="refEditDialog"
    width="30%" @throwDialogEmit="submitSave">
      <el-form :model="formType" :rules="formRules" ref="refForm">
        <el-form-item label="按钮名称" prop="title">
          <el-input placeholder="请输入按钮名称" v-model="formType.title"></el-input>
        </el-form-item>
        <el-form-item label="权限名称" prop="authorityName">
          <el-input placeholder="请输入按钮名称" v-model="formType.authorityName"></el-input>
        </el-form-item>
        <el-form-item label="" prop="hiddenCondition">
          <template #label>
            <div class="flex-row">
              <div>隐藏条件</div>
              <div style="color: #afaaaa;font-size: 12px">（例如scope.row.{模块标识&列表字段名} == {列表字段值}）</div>
            </div>
          </template>
          <el-input placeholder="请输入按钮名称" v-model="formType.hiddenCondition"></el-input>
        </el-form-item>
        <el-form-item label="模式" prop="mode" v-if="showFormType == true">
          <el-select v-model="formType.mode" placeholder="请选择模式" style="width: 100%"
          clearable>
            <el-option value="确认框" label="确认框"></el-option>
            <el-option value="确认输入框" label="确认输入框"></el-option>
            <el-option value="表单" label="表单"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="行内确认信息" prop="rowInfo" v-if="formType.mode == '确认框' || formType.mode == '确认输入框'">
          <el-input placeholder="请输入行内确认信息" v-model="formType.rowInfo"></el-input>
        </el-form-item>
        <el-form-item label="表单交互" prop="formInteraction" v-if="formType.mode == '表单'">
          <el-select v-model="formType.formInteraction" placeholder="请选择表单交互" style="width: 100%"
                     clearable>
            <el-option value="对话框" label="对话框"></el-option>
            <el-option value="抽屉" label="抽屉"></el-option>
<!--            <el-option value="表单" label="表单"></el-option>-->
          </el-select>
        </el-form-item>
        <el-form-item label="表单设计" prop="formDesign" v-if="formType.mode == '表单'">
          <el-button type="primary" @click="openFormDrawer">表单设计</el-button>
        </el-form-item>
      </el-form>
    </el-dialog-comp>

    <el-drawer-comp headTitle="表单设计" size="90%" :hasFooter="true" ref="refDrawer"
                    @throwSumitEmit="saveFormJson" :appendToBody="true">
      <v-form-designer ref="vfDesigner" :designer-config="designerConfig"></v-form-designer>
    </el-drawer-comp>
  </div>
</template>

<script>
import {addJSONForm} from "@/api/public";

let nameCheck = ''
export default {
  name: "TableSetting",
  props:{
    rightTableSettingObj:{
      type:Object,
      default(){
        return {}
      }
    }
  },
  created() {
    const keys = Object.keys(this.$props.rightTableSettingObj)
    for(let val of keys){
      this[val + 'Obj'] = {
        ...this.$props.rightTableSettingObj[val]
      }
      continue
    }
    this.paginSetting = this.$props.rightTableSettingObj.paginSetting
    this.rowBtnList = this.$props.rightTableSettingObj.rowBtnList || []
  },
  data(){
    return {
      showHover:false,
      addObj:{
        add:false,
        title:'新建',
        authorityName:'add'
      },
      deleteBatchesObj:{
        deleteBatches:false,
        title:'批量删除',
        authorityName:'delete_batches'
      },
      importDataObj:{
        importData:false,
        title:'导入',
        authorityName:'import_data'
      },
      exportDataObj:{
        exportData:false,
        title:'导出',
        authorityName:'export_data'
      },
      editBatchesObj:{
        editBatches:false,
        title:'批量编辑',
        authorityName:'edit_batches'
      },
      editObj:{
        edit:false,
        title:'编辑',
        authorityName:'edit'
      },
      deleteRowObj:{
        deleteRow:false,
        title:'删除',
        authorityName:'delete_row'
      },
      paginSetting:false,
      formType:{
        title:'',
        authorityName:'',
        mode:'',
        rowInfo:'',
        formInteraction:'',
        formDesign:'',//表单
        hiddenCondition:'',
        checkBol:false,
      },
      formRules:{
        title:[{required:true,message:'请填写按钮名称',trigger:'blur'}],
        authorityName:[{required:true,message:'请填写权限名称',trigger:'blur'}],
      },
      showFormType:false,
      designerConfig: {
        generateSFCButton: false,
        exportCodeButton: true,  //是否显示导出代码按钮
        toolbarMaxWidth: 350,
        toolbarMinWidth: 350,  //设计器工具按钮栏最小宽度（单位像素）
        formHeader: false,
      },
      rowBtnList:[],
      rowEditHas:false
    }
  },
  methods:{
    openDialog(obj,type,bol){
      this.showFormType = bol //true是自定义，false是内置按钮
      if(!bol){
        nameCheck = type
        this.formType = {
          ...obj,
        }
      }

      if(obj && bol){
        console.log(obj,'obj')
        this.formType = {
          ...obj,
        }
        this.rowEditHas = true
      }
      else if(bol){
        this.formType = {
          title:'',
          authorityName:'',
          mode:'',
          rowInfo:'',
          formInteraction:'',
          formDesign:'',//表单
          hiddenCondition:'',
          checkBol:false,
        }
        this.rowEditHas = false
      }
      this.$refs.refEditDialog.throwOpenDialog()
    },

    submitSave(){
      this.$refs.refForm.validate(bol => {
        if(bol){
          if(!this.showFormType){
            this.$message.success('编辑成功')
            this.$refs.refEditDialog.closeDialog()
            this[nameCheck + 'Obj'] = {
              ...this.formType
            }
          }
          else{
            if(this.rowEditHas){
              const ind = this.rowBtnList.findIndex(item => item.authorityName == this.formType.authorityName)
              this.rowBtnList[ind] = {
                ...this.formType
              }
              this.$refs.refEditDialog.closeDialog()
              this.$message.success('编辑成功')
              this.$forceUpdate()
            }
            else{
              this.formType.checkBol = true
              this.rowBtnList.push({...this.formType})
              this.$refs.refEditDialog.closeDialog()
              this.$message.success('添加成功')
              this.$forceUpdate()
              console.log(this.rowBtnList,'this.rowBtnList')
            }
          }
        }
      })
    },
    openFormDrawer() {
      this.$refs.refDrawer.openDrawer()
      if(this.rowEditHas){
        this.$refs.vfDesigner.setFormJson(JSON.parse(this.formType.formDesign))
      }
      else{
        this.$nextTick(()=>{ //表单初始化
          this.$refs.vfDesigner.setFormJson({"widgetList":[],"formConfig":{"modelName":"formData","refName":"vForm","rulesName":"rules","labelWidth":80,"labelPosition":"left","size":"","labelAlign":"label-left-align","cssCode":"","customClass":"","functions":"","layoutType":"PC","onFormCreated":"","onFormMounted":"","onFormDataChange":"","onFormValidate":""}})
        })
      }

    },
    saveFormJson(){
      this.formType.formDesign = JSON.stringify(this.$refs.vfDesigner.getFormJson())
      this.$message.success('保存成功')
      this.$refs.refDrawer.closeDrawer()
    },
    throwData(){
      return {
        add:{
          ...this.addObj
        },
        deleteBatches:{
          ...this.deleteBatchesObj
        },
        importData:{
          ...this.importDataObj
        },
        exportData:{
          ...this.exportDataObj
        },
        editBatches:{
          ...this.editBatchesObj
        },
        edit:{
          ...this.editObj
        },
        deleteRow:{
          ...this.deleteRowObj
        },
        paginSetting:this.paginSetting,
        rowBtnList:this.rowBtnList
      }
    }
  }
}
</script>

<style scoped>

</style>
